<template>
  <div>
    <div class="otp-list">
      <div class="otp-item" v-for="item in otpList">
        <div class="otp-item-title">
          <span>{{ item.issuer }}</span>
        </div>
        <div class="otp-item-secret">
          <div class="otp-item-secret-title">输入框</div>
          <div>{{ item.selector || '--' }}</div>
        </div>
        <div class="otp-item-secret">
          <div class="otp-item-secret-title">提交按钮</div>
          <div>{{ item.submit || '--' }}</div>
        </div>
        <div class="tools">
          <button class="button-text" @click="editOtp(item)">编辑</button>
          <button class="button-text button-red" @click="deleteOtp(item)">
            删除
          </button>
        </div>
      </div>
      <div class="add-otp otp-item" @click="addOtp">
        <div>新增</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getStorage, setStorage } from '../utils/storage';
import { useRouter } from 'vue-router';
import confirm from '../components/confirm.ts';
const router = useRouter();
const otpList = ref<any[]>([]);

const getOtpList = () => {
  getStorage('otpList', (result) => {
    otpList.value = result;
  });
};
onMounted(() => {
  getOtpList();
});
const addOtp = () => {
  router.push('/add');
};
const editOtp = (item: any) => {
  router.push({ path: '/add', query: { id: item.id } });
};
const deleteOtp = (item: any) => {
  confirm({
    title: '提示',
    text: '确定删除该OTP吗？',
  }).then(() => {
    getStorage('otpList', (result) => {
      result = result.filter((it: any) => it.id !== item.id);
      setStorage('otpList', result);
      window.location.reload();
    });
  });
};
</script>

<style scoped lang="scss">
@use '../vars.scss';
.option {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  .add-otp {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      border-color: vars.$primary-color;
    }
    > div {
      font-size: 16px;
      text-decoration: none;
    }
  }
  .otp-item {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    width: 22%;
    height: 100px;
    display: flex;
    gap: 5px;
    flex-direction: column;
    .active {
      background-color: #ece9e9;
      color: vars.$primary-color;
    }
    .list {
      cursor: pointer;
      border-radius: 5px;
      padding: 10px 15px;
      font-size: 16px;
      &:hover {
        background-color: #ece9e9;
      }
    }
  }
  .table {
    flex: 1;
    .tool {
      padding-bottom: 16px;
    }
  }
}
.formatUrl {
  cursor: pointer;
  &:hover {
    color: vars.$primary-color;
  }
}
</style>
